<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚合图床文件上传</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置页面的字体和添加背景图片 */
        body {
            font-family: Arial, sans-serif;
            background: url('https://ps.ssl.qhimg.com/t02906637da23a078da.jpg') no-repeat center center fixed;
            background-size: cover;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        /* 容器样式 */
        .container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

        /* 标题样式 */
        h2 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }

        /* 文件输入框样式 */
        input[type="file"] {
            display: block;
            margin: 0 auto 20px;
            padding: 8px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #333;
        }

        /* 按钮通用样式 */
        button {
            background-color: #007BFF;
            color: #fff;
            padding: 12px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 5px;
        }

        /* 按钮悬浮效果 */
        button:hover {
            background-color: #0056b3;
        }

        /* 禁用按钮样式 */
        button:disabled {
            background-color: #999;
            cursor: not-allowed;
            opacity: 0.6;
            border: 1px solid #888;
            color: #666;
            text-decoration: line-through;
        }

        /* 上传结果区域样式 */
        .result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
            font-size: 16px;
            color: #333;
            min-height: 40px;
        }

        /* 错误或成功的提示信息样式 */
        .result.success {
            border-color: #28a745;
            background-color: #e9f7e8;
        }

        .result.error {
            border-color: #dc3545;
            background-color: #f8d7da;
        }

        /* 显示图片的样式 */
        .uploaded-image {
            margin-top: 20px;
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        /* 图片链接居中样式 */
        .center-url {
            text-align: center;
            margin: 15px 0;
            padding: 10px;
        }

        .center-url a {
            color: #007BFF;
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            word-break: break-all;
        }

        .center-url a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* 全屏遮罩样式 */
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none; /* 默认隐藏 */
            flex-direction: column;
            color: white;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            gap: 8px;
            font-size: 18px;
            font-weight: 800;
        }
        /* 旋转圆圈 */
        .loader {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 防止滚动穿透 */
        body.mask-visible {
            overflow: hidden;
            margin: 0; /* 移除默认边距 */
        }
    </style>
</head>

<body>

    <!-- 在body标签内最前面添加拖放区域提示 -->
    <div id="dropZone"
         style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 10000; border: 4px dashed #fff; pointer-events: none;">
        <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; text-align: center;">
            🖼️ 松开上传图片
        </div>
    </div>


    <div class="mask">
        <div class="loader"></div>
        正在努力却又缓慢上传中...
    </div>


    <div class="container">
        <h2>聚合图床文件上传</h2>
        <input type="file" id="fileInput">
        <div id="okBtns" style="display: none;">
            <button id="copyUrlBtn">复制图片链接</button>
            <button id="resetBtn">重置</button>
        </div>


        <div class="result" id="resultDiv"></div>
        <button id="neteaseUploadBtn">网易图床</button>
        <button id="_360UploadBtn">360 图床</button>
        <button id="sougouUploadBtn">搜狗图床</button>
        <button id="jdUploadBtn">京东图床</button>
        <button id="yzUploadBtn">邮政图床</button>

    </div>
    <script>
        const okBtns = document.getElementById('okBtns');
        const fileInput = document.getElementById('fileInput');
        const resultDiv = document.getElementById('resultDiv');
        const copyUrlBtn = document.getElementById('copyUrlBtn');
        const resetBtn = document.getElementById('resetBtn');
        const uploadButtons = document.querySelectorAll('button:not(#copyUrlBtn, #resetBtn)');

        function showMessage(message, isError = false) {
            resultDiv.classList.remove('success', 'error');
            if (isError) {
                resultDiv.classList.add('error');
            } else {
                resultDiv.classList.add('success');
            }
            resultDiv.textContent = message;
        }

        async function bindUploadButton(button, url) {
            button.addEventListener('click', async () => {
                const file = fileInput.files[0];
                if (!file) return showMessage('请先选择文件！', true);

                const fileSize = file.size;
                const twoMB = 2 * 1024 * 1024;
                const fiveMB = 5 * 1024 * 1024;

                if (url === 'https://api.xinyew.cn/api/psbctc' && fileSize > twoMB) {
                    return showMessage('上传的图片大小超过2MB，无法使用邮政图床上传！', true);
                }

                if (url === 'https://api.xinyew.cn/api/jdtc' && fileSize > fiveMB) {
                    return showMessage('上传的图片大小超过5MB，无法使用京东图床上传！', true);
                }

                // ——————————开始准备上传————————————
                const formData = new FormData();
                formData.append('file', file);
                const xhr = new XMLHttpRequest();
                xhr.open('POST', url, true);
                xhr.onreadystatechange = function () {
                    document.querySelector('.mask').style.display = 'none'; // 请求结束，马上关闭遮罩成
                    document.body.classList.remove('mask-visible');
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            const data = JSON.parse(xhr.responseText);
                            if (data.errno === 0) {
                                okBtns.style.display = 'block';
                                const imageUrl = data.data.url;
                                resultDiv.innerHTML = `
                                        <p>上传成功！</p>
                                        <p class="center-url">图片链接: <a href="${imageUrl}" target="_blank">${imageUrl}</a></p>
                                        <img src="${imageUrl}" alt="上传的图片" class="uploaded-image" />
                                    `;
                            } else showMessage(data.error, true);
                        } else showMessage('请求发生错误：' + xhr.statusText, true);
                    }
                };
                document.querySelector('.mask').style.display = 'flex';
                document.body.classList.add('mask-visible');
                xhr.send(formData);
            });
        }

        // 绑定所有上传按钮事件
        bindUploadButton(document.getElementById('neteaseUploadBtn'), 'https://api.xinyew.cn/api/yanxuantc');
        bindUploadButton(document.getElementById('_360UploadBtn'), 'https://api.xinyew.cn/api/360tc');
        bindUploadButton(document.getElementById('sougouUploadBtn'), 'https://api.xinyew.cn/api/sogotc');
        bindUploadButton(document.getElementById('jdUploadBtn'), 'https://api.xinyew.cn/api/jdtc');
        bindUploadButton(document.getElementById('yzUploadBtn'), 'https://api.xinyew.cn/api/psbctc');

        // 复制图片链接按钮点击事件
        copyUrlBtn.addEventListener('click', function () {
            const linkElement = resultDiv.querySelector('a');
            if (linkElement) {
                const imageUrl = linkElement.href;
                navigator.clipboard.writeText(imageUrl)
                   .then(() => {
                        showMessage('图片链接已复制到剪贴板');
                    })
                   .catch((err) => {
                        console.error('复制失败:', err);
                        showMessage('复制失败，请手动复制', true);
                    });
            } else {
                showMessage('暂无图片链接可复制', true);
            }
        });

        // 重置按钮点击事件
        resetBtn.addEventListener('click', function () {
            fileInput.value = '';
            showMessage('');
            okBtns.style.display = 'none';
        });


        // ——————————————拖放功能实现————————————————————
        document.addEventListener('dragover', (e) => {
            e.preventDefault();
            if (e.dataTransfer.types.includes('Files')) {
                document.getElementById('dropZone').style.display = 'block';
            }
        });
        document.addEventListener('dragleave', () => {
            document.getElementById('dropZone').style.display = 'none';
        });
        document.addEventListener('drop', (e) => {
            e.preventDefault();
            document.getElementById('dropZone').style.display = 'none';
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type.startsWith('image/')) {
                handleFileInput(files[0]);
            }
        });

        // ——————————————粘贴功能实现————————————————
        document.addEventListener('paste', (e) => {
            const items = e.clipboardData.items;
            for (let item of items) {
                if (item.type.startsWith('image/')) {
                    const blob = item.getAsFile();
                    handleFileInput(blob);
                    break;
                }
            }
        });

        // ————————————通用文件处理函数——————————
        function handleFileInput(file) {
            // 创建新的FileList对象
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            // 更新文件输入框
            fileInput.files = dataTransfer.files;
            // 触发change事件
            const event = new Event('change', { bubbles: true });
            fileInput.dispatchEvent(event);
            // 显示文件名
            showMessage(`已选择文件: ${file.name}`);
        }



    </script>
</body>

</html>